<template>
  <div class="qz-pagination">
    <el-pagination
      v-show="handleSizeChange && handleCurrentChange && total"
      ref="pagination"
      :class="[colors, 'pagination']"
      background
      :current-page="pagingPage"
      :page-size="pagingSize"
      :page-sizes="[5, 10, 20, 50, 100, 200, 300, 500]"
      :pager-count="5"
      layout="total, prev, pager, next, jumper, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
/**
 * @description 封装分页操作
 * @param { Number } total 总条数
 * @param { Number } page 页码
 * @param { Number } size 一页几条
 * @param { String } total 总条数
 * @param { String } palte 主题色 用来兼容不同板块不同主题 默认绿色
 */

import { defineProps, ref, computed, defineEmits, onMounted } from 'vue'
const emits = defineEmits(['row-click', 'handleCurrentChange', 'handleSizeChange'])
const props = defineProps({
  page: {
    type: Number,
    default: 1,
  },
  size: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 10,
  },
  palte: {
    type: String,
    default: 'defalut',
    validator: function (value) {
      return ['bill', 'fund', 'interbank', 'defalut'].indexOf(value) !== -1
    },
  },
})

const pagingPage = ref(1)
const pagingSize = ref(10)
const colors = computed(() => {
  var themeClass = ''
  if (props.palte === 'bill') {
    themeClass = 'pager-bill'
  } else if (props.palte === 'fund') {
    themeClass = 'pager-fund'
  } else if (props.palte === 'interbank') {
    themeClass = 'pager-interbank'
  } else {
    themeClass = 'pager-defalut'
  }
  return themeClass
})

onMounted(() => {
  domOper()
})

const domOper = () => {
  // 更改ui文案
  const jumper = document.getElementsByClassName('el-pagination__jump')
  jumper[0].childNodes[0].nodeValue = '第'
}

const handleCurrentChange = (val) => {
  emits('handleCurrentChange', val)
}

const handleSizeChange = (val) => {
  emits('handleSizeChange', val)
}
</script>
<style lang="scss" scoped>
.qz-pagination {
  margin-top: 10px;
  overflow: hidden;
  :deep(.el-pagination) {
    display: flex;
    justify-content: flex-end;
    padding: 0 5px;
    .el-pagination__total {
      flex: 1;
    }
    .el-pagination__jump {
      display: flex;
      align-items: center;
    }
    .el-pagination__sizes {
      margin: 0 0 0 10px;
    }
    .el-input__inner {
      height: 26px;
    }
  }
}
</style>
